// 封装自动聚焦指令
 function fengzhuang(el){
  // 判断如果是input或textarea标签则直接 focus 聚焦
  if(el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA'){
    console.log('直接聚焦')
    el.focus()
  }else{
    setTimeout(()=>{
      console.log('尝试获取节点聚焦')
      // 如果不是则尝试获取节点并且自动聚焦
      let ipt = el.querySelector('input')
      let area = el.querySelector('textarea')
      if(ipt) ipt.focus()
      if(area) area.focus()
    },0)
  }
}

// 封装中间件函数(自动聚焦)
export let focusObj = {
   install(Vue){
     // 注册全局自定义指令
     Vue.directive('focus',{
       // inserted函数执行时机,在插入到真实Dom的那一刻才触发,如果标签用displaty隐藏再出现,是不会触发inserted函数的
       inserted(el){
          fengzhuang(el)
       },
       // 指令所在标签(模板结构),被更新时触发(被解析时)
       update(el){
          fengzhuang(el)
       }
     })
   }
}
// 高亮
export let lightHeight = {
  install(Vue){
     Vue.directive('highlight', function (el) { // 自定义一个代码高亮指令
           const highlight = el.querySelectorAll('pre, code') // 获取里面所有pre或者code标签
           highlight.forEach((block) => {
               hljs.highlightElement(block) // 突出显示这些标签(以及内部代码, 会自动识别语言)
           })
       })
  }
}